<template>
	<view class="page-wrapper">
		<CommonTitle title="告警" @handleInfoSuccess="handleCommonInfoSuccess"></CommonTitle>
		<view
			class="page-content"
			:style="{
				height: `calc(100% - ${titleHeight}px)`
			}"
		>
			<!-- 告警条数 -->
			<view class="warn-desc-wrap">
				<view class="warn-box">
					<image class="warn-logo" src="@/assets/images/warn/warn-logo.png" mode=""></image>
					<!-- 文字 -->
					<view class="text-box">
						<text class="title">今日告警</text>
						<text class="num">{{ params.day }}</text>
						<text class="unit">条</text>
					</view>
				</view>
			</view>
			<!-- 表格 -->
			<view class="scroll-wrapper">
				<view class="table-wrap">
					<up-table
						border-color="none"
						bgColor="#1D5FB2"
						color="#fff"
						align="center"
						:th-style="{ color: '#fff', height: '68rpx', background: '#226ECD' }"
					>
						<up-tr class="u-table-header">
							<up-th v-for="(item, index) of tableHeaderData" :key="index" :width="item.width">
								{{ item.name }}
							</up-th>
						</up-tr>
						<up-tr
							class="u-table-body-row"
							v-for="(bodyItem, bodyIndex) of warnListData"
							:key="bodyIndex"
						>
							<up-td width="80rpx">{{ bodyIndex + 1 }}</up-td>
							<up-td width="150rpx">{{ bodyItem.busSystem }}</up-td>
							<up-td width="300rpx">{{ bodyItem.createTime }}</up-td>
							<up-td>{{ bodyItem.status === 0 ? '未读' : '已读' }}</up-td>
							<up-td width="670rpx">{{ bodyItem.content }}</up-td>
						</up-tr>
					</up-table>
				</view>
			</view>

			<!-- 分页 -->
			<view class="u-demo-block__content">
				<uni-pagination
					:total="params.total"
					:pageSize="params.pageSize"
					title="标题文字"
					prev-text="前一页"
					next-text="后一页"
					@change="handleCurrentChange"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getWarnListAPI } from '@/api/dataScreenBig/warn';

// 标题组件加载完毕
const titleHeight = ref(0);
const handleCommonInfoSuccess = (info) => {
	titleHeight.value = info.titleBoxHeight;
};

const tableHeaderData = [
	{ name: '编号', width: '80rpx' },
	{ name: '系统名称', width: '150rpx' },
	{ name: '创建时间', width: '300rpx' },
	{ name: '状态', width: '150rpx' },
	{ name: '详情', width: '670rpx' }
];

const params = reactive({
	currentPage: 1,
	pageSize: 15,
	total: 0,
	day: 0
});

const warnListData = ref([]);
const getWarnListDataAsync = async () => {
	const res = await getWarnListAPI({
		pageNum: params.currentPage,
		pageSize: params.pageSize
	});
	if (res.code !== 200) return;
	warnListData.value = res.rows;
	params.total = res.total;
	params.day = res.day;
};
const handleCurrentChange = (page) => {
	console.log('当前页:', page);
	params.currentPage = page.current;
	getWarnListDataAsync();
};
onMounted(() => {
	getWarnListDataAsync();
});
</script>

<style lang="scss" scoped>
.scroll-wrapper {
	width: 100%;
	overflow-x: auto;
	.table-wrap {
		width: 1350rpx;
	}
}
.u-table-header {
	background-color: #226ecd !important;
}

.u-table-body-row {
	height: 100rpx;
	border-bottom: 1rpx solid #fff;
}

.u-demo-block__content {
	padding: 20rpx;

	::v-deep(.uni-pagination) {
		.uni-pagination__num-current-text {
			&:not(.current-index-text) {
				color: #fff;
			}
		}
	}
}

.page-content {
	width: 100%;
	overflow-y: auto;
}

.warn-desc-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 280rpx;

	.warn-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 480rpx;
		height: 120rpx;
		background: rgba(17, 45, 109, 0.55);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #12b4f9;

		.warn-logo {
			width: 72rpx;
			height: 72rpx;
		}

		.text-box {
			display: flex;
			align-items: center;
			margin-left: 42rpx;
			color: #fff;

			.title {
				font-size: 24rpx;
			}

			.num {
				margin: 0 22rpx;
				color: #ffff90;
				font-size: 76rpx;
			}

			.unit {
				font-size: 24rpx;
			}
		}
	}
}
</style>
